<template>
  <div class="error-fallback">
    <n-card title="组件加载失败" size="large">
      <div class="error-content">
        <n-icon size="64" color="#ff4d4f">
          <WarningOutline />
        </n-icon>
        <h2>LogViewer 组件加载失败</h2>
        <p>无法加载日志查看器组件，请尝试以下解决方案：</p>
        <ul>
          <li>刷新页面</li>
          <li>检查网络连接</li>
          <li>清除浏览器缓存</li>
          <li>重启开发服务器</li>
        </ul>
        <n-button type="primary" @click="retryLoad">
          重试加载
        </n-button>
        <n-button @click="goHome" style="margin-left: 12px;">
          返回首页
        </n-button>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { NCard, NIcon, NButton } from 'naive-ui'
import { WarningOutline } from '@vicons/ionicons5'
import { useRouter } from 'vue-router'

const router = useRouter()

function retryLoad() {
  // 尝试重新加载当前路由
  router.go(0)
}

function goHome() {
  router.push('/')
}
</script>

<style scoped>
.error-fallback {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 20px;
}

.error-content {
  text-align: center;
  max-width: 500px;
}

.error-content h2 {
  color: #ff4d4f;
  margin: 20px 0 16px 0;
}

.error-content p {
  color: #666;
  margin-bottom: 16px;
}

.error-content ul {
  text-align: left;
  display: inline-block;
  margin: 16px 0 24px 0;
  color: #666;
}

.error-content li {
  margin: 8px 0;
}
</style> 